{extend name='api/view/main'}

{block name='title'}{/block}

{block name='content'}
<div class="container">
    {notempty name='info'}
    <h2>{$info.title|default=''}</h2>
    <h3>
        <span style="color:#666">{$info.author}</span>
        <span style="margin-left:0.4rem">{:date('Y年m月d日',strtotime($info.create_at))}</span>
    </h3>
    {if $info.show_cover_pic and $info.local_url}<img src="{$info.local_url}" style="width:100%" alt="img">{/if}
    <div class='content-text'>
        {$info.content|raw}
    </div>
    <div class="content-read">阅读 {$info.read_num}</div>
    {else}
    <div class="info"><h3>404</h3> 访问资源不存在哦！</div>
    {/notempty}
</div>

<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

<wx-open-launch-weapp
        id="launch-btn"
        username="gh_3fca65794476"
        path="haoDa/index/index"
>
    <template>
        <style>.btn { padding: 12px; display: none;}</style>
        <button class="btn">打开小程序</button>
    </template>
</wx-open-launch-weapp>
<script>
    var btn = document.getElementById('launch-btn');
    btn.addEventListener('launch', function (e) {
        console.log('success');
    });
    btn.addEventListener('error', function (e) {
        console.log('fail', e.detail);
    });
</script>
<script>
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
        appId: '{$sdk.appId}', // 必填，公众号的唯一标识
        timestamp: {$sdk.timestamp}, // 必填，生成签名的时间戳
        nonceStr: '{$sdk.nonceStr}', // 必填，生成签名的随机串
        signature: '{$sdk.signature}',// 必填，签名
        jsApiList: [
            {foreach $sdk.jsApiList as $row}
            "{$row}",
            {/foreach}
        ], // 必填，需要使用的JS接口列表
        openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
    });

    wx.ready(function () {
        var btn = document.getElementById('launch-btn');
        btn.click();

        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
    });

    wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
    });
</script>
{/block}

{block name='style'}
<style>
    html {
        width: 100%;
        height: 100%;
        display: block;
        background: white;
    }

    .container {
        width: 90%;
        color: #333;
        display: block;
        margin: .2rem auto;
        position: relative
    }

    .container h2 {
        font-size: .8rem;
        font-weight: 400;
        line-height: 1.5rem
    }

    .container h3 {
        color: #999;
        font-size: .6rem;
        font-weight: 400;
        line-height: 1.5rem;
        margin-bottom: .3rem
    }

    .container .content-read {
        color: #999;
        font-size: 0.6rem;
        text-align: right;
        margin-top: 0.5rem;
        line-height: 2rem;
        padding-bottom: 1rem;
    }

    .container .content-text {
        font-size: .7rem;
        line-height: 1.3rem
    }

    .container .content-text img {
        max-width: 100%;
        height: auto !important
    }
</style>
{/block}